<template>
  <el-color-picker v-model="theme" :predefine="predefine" class="theme-picker" popper-class="theme-picker-dropdown" />
</template>

<script>
// const version = require('element-ui/package.json').version // element-ui version from node_modules
// const ORIGINAL_THEME = '#409EFF' // default color
import {initCurTheme, changeCurTheme} from '@/utils/themeUtil';

export default {
  data() {
    return {
      predefine:['#2d3436', '#304156', '#636e72', '#8395a7', '#11a983', '#13c2c2', '#54a0ff', '#1890ff', '#a29bfe', '#6959CD',
        '#ccae62', '#ff9f43', '#fab1a0', '#e17055', '#ff7675', '#fd79a8', '#f78fb3', '#e84393', '#f5222d'],
      // chalk: '', // content of theme-chalk css
      theme: ''
    }
  },
  computed: {
    defaultTheme() {
      return this.$store.state.settings.theme
    }
  },
  watch: {
    defaultTheme: {
      handler: function(val, oldVal) {
        this.theme = val
      },
      immediate: true
    },
    async theme(val){
      await changeCurTheme(val)
      this.$emit('change', val)
    }
  },
  created() {
    initCurTheme(this.defaultTheme)
  },

  methods: {
    // changeTheme(val){

    // },

  }
}
</script>

<style>
.theme-message,
.theme-picker-dropdown {
  z-index: 99999 !important;
}

.theme-picker .el-color-picker__trigger {
  height: 26px !important;
  width: 26px !important;
  padding: 2px;
}

.theme-picker-dropdown .el-color-dropdown__link-btn {
  display: none;
}
</style>
